<script setup lang="ts">
import { iProps } from './type'
import { useVmodel } from '@/hooks/vmodel'
const props = withDefaults(defineProps<iProps>(), {
  label: '标题',
  type: 'text',
  modelValue: '',
  placeholder: ''
})
// 创建model
const modelValue = useVmodel(props, 'modelValue')
</script>

<template>
  <div class="vs-userinput">
    <div class="vs-userinput__label">{{ props.label }}</div>
    <div class="vs-userinput__block vs-userinput--bg">
      <div class="vs-userinput--slot">
        <slot name="left"></slot>
      </div>
      <input
        :type="props.type"
        v-model="modelValue"
        :placeholder="placeholder"
        class="vs-userinput__block__input"
      />
      <div class="vs-userinput--slot">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.vs-userinput {
  margin-top: 10px;
  &__label {
    color: #000;
    font-size: 8px;
    margin-bottom: 6px;
  }
  &__block {
    display: flex;
    padding: 0 6px;
    &__input {
      flex: 1;
      border: none;
      background-color: rgb(249, 249, 249);
      height: 26px;
      padding: 0 4px;
    }
  }
  &--bg {
    background-color: rgb(249, 249, 249);
    border-radius: 4px;
    overflow: hidden;
  }
  &--slot {
    display: flex;
    align-items: center;
  }
}
</style>
